<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="904px"
  >
    <div class="steps">
      <div class="step-item" :class="{ active: active === 0 }">1上传文件</div>
      <div class="step-item" :class="{ active: active === 1 }">2校验数据</div>
      <div class="step-item" :class="{ active: active === 2 }">3写入数据</div>
    </div>
    <div class="pages">
      <div v-if="active === 0" class="page-item">
        <p>页面1，点击按钮，模拟上传文件，上传完可以下一步</p>
        <el-button @click="uploadFile"> 上传文件 </el-button>
      </div>
      <div v-if="active === 1" class="page-item">
        页面2，模拟校验数据，2秒后可以下一步
      </div>
      <div v-if="active === 2" class="page-item">
        页面3，模拟写入数据，2秒后可以关闭
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="preBtnDisabled" @click="upsetStep('pre')">{{
        preBtn
      }}</el-button>
      <el-button
        type="primary"
        :disabled="nextBtnDisabled"
        @click="upsetStep('next')"
        >{{ nextBtn }}</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
const stepStart = 0; // 步骤开始
const stepEnd = 2; // 步骤结束
const handleInterfaces = ['', 'checkImportData', 'addImportData'];
export default {
  components: {},
  props: {
    title: {
      // 弹窗的标题
      type: String,
      default: '',
    },
    interfaceName: {
      // 导入数据的接口名称
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogVisible: true,
      preBtn: '取消', // 两个按钮的文字
      nextBtn: '下一步',
      preBtnCheck: false, // 是否需要二次确认
      preBtnDisabled: false, // pre按钮的禁用状态
      nextBtnDisabled: false, // next按钮的禁用状态
      active: 0, // 步骤条的步数
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      // 初始化一些数据和状态
      this.active = 0;
      this.preBtn = '取消';
      this.nextBtn = '下一步';
      (this.preBtnCheck = false), (this.nextBtnDisabled = true);
    },
    uploadFile() {
      // 模拟上传文件的接口
      // 将nextBtn设置为禁用
      this.changeBtnClickOperate('nextBtnDisabled', true);
      // 将preBtn设为需要二次确认
      this.changeBtnClickOperate('preBtnCheck', true);
      setTimeout(() => {
        this.changeBtnClickOperate('nextBtnDisabled', false);
      }, 2000);
    },
    checkImportData() {
      // 模拟校验数据的接口
      this.changeBtnClickOperate('preBtnDisabled', true);
      this.changeBtnClickOperate('nextBtnDisabled', true);
      setTimeout(() => {
        this.changeBtnClickOperate('preBtnDisabled', false);
        this.changeBtnClickOperate('nextBtnDisabled', false);
      }, 2000);
    },
    addImportData() {
      // 模拟写入数据的接口
      this.changeBtnClickOperate('nextBtnDisabled', true);
      this.changeBtnClickOperate('preBtnDisabled', true);
      setTimeout(() => {
        this.changeBtnClickOperate('nextBtnDisabled', false);
        this.changeBtnClickOperate('preBtnDisabled', false);
        this.changeBtnClickOperate('preBtnCheck', false);
      }, 2000);
    },
    changeBtnClickOperate(btnStatusName, type) {
      this[`${btnStatusName}`] = type;
    },
    upsetStep(type) {
      // 检查是否是最初、最后的步骤
      const {checked, closeType} = this.checkStep(type);
      if (checked) {
        this.closeDialog(closeType);
        return;
      }
      // 更新页面
      if (type === 'pre') {
        this.active--;
      } else {
        this.active++;
      }
      // 根据active改变按钮的文字和可用状态
      if (this.active === stepStart) {
        this.preBtn = '取消';
        this.nextBtn = '下一步';
        this.changeBtnClickOperate('nextBtnDisabled', true);
      } else {
        this.preBtn = '上一步';
      }
      if (this.active === stepEnd) {
        this.preBtn = '关闭窗口';
        this.nextBtn = '完成';
      }
      // 到这一步说明active合法，可以调用每一个步骤的接口了
      const handleInterface = handleInterfaces[this.active];
      if (handleInterface.length > 0) {
        this[handleInterface]();
      }
    },
    checkStep(type) {
      /**
       * this.active === stepStart&&type==='pre' 在第一页按下取消
       * this.active === stepEnd&&type==='next' 在最后一页按下完成
       * this.active === stepEnd&&type==='pre' 在最后一页按下关闭窗口
       */
      const checked =
        (this.active === stepStart && type === 'pre') ||
        (this.active === stepEnd && type === 'next') ||
        (this.active === stepEnd && type === 'pre');
      const closeType =
        (this.active === stepStart && type === 'pre') ||
        (this.active === stepEnd && type === 'pre')
          ? 'cancel'
          : this.active === stepEnd && type === 'next'
            ? 'confirm'
            : '';
      return {checked, closeType};
    },
    closeDialog(type) {
      // 检查是否需要弹出二次确认框
      if (this.preBtnCheck) {
        this.open(() => {
          this.dialogVisible = false;
        });
      } else {
        this.$emit(type);
        this.dialogVisible = false;
      }
    },
    handleClose() {
      // 这里处理点击按钮以外，关闭弹窗的情况
      if (this.preBtnCheck) {
        this.open(() => {
          this.dialogVisible = false;
        });
      } else {
        this.dialogVisible = false;
      }
    },
    open(callback) {
      this.$confirm('现在取消不会保留任何更改，确认离开？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
          if (action === 'confirm') {
            callback();
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-dialog {
  .el-dialog__header {
    padding: 14px 24px;
    border-bottom: 1px solid #dadfe6;
    .el-dialog__title {
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 20px;
    .steps {
      display: flex;
      .step-item {
        margin-right: 100px;
        &.active {
          color: blue;
        }
      }
    }
  }
  .el-dialog__footer {
    border-top: 1px solid #dadfe6;
    text-align: center;
  }
}
</style>